<template>
    <div>
`    <div class="layout-main">
        <div style="display:flex;item-align:center;margin-top:50px;padding-bottom:10px">  
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/supplyDemand' }">供需展示</el-breadcrumb-item>
                <el-breadcrumb-item>需求一览</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div id="chosenPanel">
            <div>需求类别：</div>
            <!-- <el-checkbox-group ref='checkBox' v-model="chosenList">
                <el-checkbox label="铝土矿"></el-checkbox>
                <el-checkbox label="氧化铝"></el-checkbox>
                <el-checkbox label="铝锭"></el-checkbox>
                <el-checkbox label="成品铝" ></el-checkbox>
            </el-checkbox-group> -->
            <el-radio-group ref = "radio" v-model="genre">
                <el-radio :label=1>铝土矿</el-radio>
                <el-radio :label=2>氧化铝</el-radio>
                <el-radio :label=3>电解铝</el-radio>
                <el-radio :label=4>成品铝</el-radio>
                <el-radio :label=5>所有</el-radio>
            </el-radio-group>
            <div style="margin-left:50px">
                <el-button type='primary' icon="el-icon-search" @click="filter">搜索</el-button>
            </div>
        </div>

        <!-- flex排列摆放缩略图区域-->
        <div style="display:flex;flex-wrap:wrap;width:100%;">
            <div v-for="(req,index) in showList" :key=index style="width:250px;height:250px;margin:30px" v-show="chosenList.includes(req.reqTypeId)">
                <el-card style="cursor:pointer;height:200px;position:relative" shadow="hover" >
                    <div style="font-size:18px;font-weight:bold;margin-top:10px;margin-bottom:10px;position:absolute;top:20%">{{ req.reqName}} </div>
                    <div style="font-size:13px;margin-bottom:20px;position:absolute;top:45%">需求商:{{ req.firm_name}} </div>
                    <div style="display:flex;position:absolute;top:75%">
                        <div style="color:red;font-size:18px">{{ req.reqPrice}}</div>
                    </div>
                    <div style="position:absolute;font-size:14px;right:1px;position:absolute;bottom:15px;right:3px">
                        <router-link :to="{path:('/supplyDemand/requirements/' + req.requirementId)}">查看详情></router-link>
                    </div>
                    
                </el-card>
            </div>
        </div>


        <!-- <el-card  style="margin-top:30px">
            
            <el-table :data="reqList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="商品requirementId" prop="requirementId"></el-table-column>
                <el-table-column label="商品名称" prop="pname"></el-table-column>
                <el-table-column label="商品种类" prop="pgenre"></el-table-column>
                <el-table-column label="店家名称" prop="firm_name"></el-table-column>
                <el-table-column label="详情页面" prop="url">
                    <template slot-scope="scope">
                        <router-link v-bind:to="'/supplyDemand/reqs/'+scope.row.requirementId" style="color:#409EFF">链接</router-link>
                    </template>
                </el-table-column>
            </el-table>

        </el-card> -->

        <div class="block">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
            </el-pagination>
        </div>
        <div style="padding-bottom:30px"></div>
    </div>`
    </div>
</template>

<script>
import axios from "@/utils/request"
export default({
    name:"RequirementOverview",
    data(){
        return{
            queryInfo:{
                "page":this.$route.query.page,
                "page_size":this.$route.query.page_size,
                "type":this.$route.query.genre,
            },
            showList:[],
            reqList:[{"requirementId":1,"reqTypeId":1,"reqName":"甲铝矿","firm_name":"A公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"},
                {"requirementId":2,"reqTypeId":2,"reqName":"戊铝矿","firm_name":"B公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"},
                {"requirementId":5,"reqTypeId":1,"reqName":"甲铝矿","firm_name":"A公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"},
                {"requirementId":6,"reqTypeId":3,"reqName":"戊铝锭","firm_name":"B公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"},
                {"requirementId":7,"reqTypeId":3,"reqName":"戊铝锭","firm_name":"C公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"}],
            total:'',
            genre:0,
            chosenList:[1,2,3,4],
            currentPage3:1,
            url:"http://localhost:8009/lv-industry-app/requirement/get-overview-requirements",
            url2:"http://localhost:8009/lv-industry-app/requirement/get-latest-requirements"
        }
    },
    mounted(){
        // this.reqList = [{"requirementId":1,"reqTypeId":"1","reqName":"甲铝矿","firm_name":"A公司","firm_phone":"1234678","firm_email":"ji@126.com"},
        //     {"requirementId":2,"reqTypeId":"1","reqName":"甲铝矿","firm_name":"A公司","firm_phone":"1234678","firm_email":"ji@126.com"},
        //     {"requirementId":3,"reqTypeId":"1","reqName":"甲铝矿","firm_name":"A公司","firm_phone":"1234678","firm_email":"ji@126.com"},
        //     {"requirementId":6,"reqTypeId":"3","reqName":"戊铝锭","firm_name":"B公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"},
        //     {"requirementId":7,"reqTypeId":"3","reqName":"戊铝锭","firm_name":"C公司","firm_phone":"1234678","firm_email":"ji@126.com","reqPrice":"面议"}]
        
        
        this.getreqsAllList()
        console.log(this.reqList)
        // this.showList = [...this.reqList]
    },
    methods: {
        async getreqsAllList(){
            await axios.get(this.url2).then((response)=>{
                if(response.success == true)
                {
                    console.log(response.data)
                    this.reqList = response.data
                    console.log(this.reqList)
                }
            })
        },
        async getreqList(){
            // const {data:res} = await this.$http.get(this.url,{
            //     params:this.queryInfo
            // })//params具体格式要再对接，是否有成功码
            // this.reqList = res.data;

            await axios.get(this.url,{params:this.queryInfo}).then((response)=>{
                if(response.success == true)
                    this.reqList = response.data
            })
        },
        handleCurrentChange(val){
            this.queryInfo.page = val
            this.getreqList()
        },
        filter()
        {
            this.showList = []
            for(var i = 0;i < this.reqList.length;i++)
            {
                if(this.genre == 5 || this.reqList[i].reqTypeId == this.genre)
                    this.showList.push(this.reqList[i]);
            }

            
            if(this.genre == 5)
                this.getreqsAllList();
            else
            {
                this.queryInfo.type = this.genre;
                this.getreqList();
            }
                
            console.log(this.goodList)
            
        }
    },
})
</script>

<style scoped>
.layout-main
{
    margin-left: 100px;
    margin-right: 100px
}

li
{
    height:100px;
    width:300px;
    list-style-type: none;
}

#chosenPanel
{
    display:flex;
    padding-top:10px;
    padding-bottom:5px;
    align-items: center;
}

</style>